<template>
  <div class="plist">
    <ProductListNav v-show="isShow" style="position:fixed"></ProductListNav>
    <div class="section">
      <p><i>满折</i><span>男人焕新一件7折</span></p>
      <p><i>免运</i><span>满688元全场免运</span></p>
      <div class="productlists">
        <ul>
          <router-link
            v-for="data in dataList"
            :key="data.productId"
            :to="{
              name: 'Detail',
              query:{id:data.productId}
            }"
            tag="li"
          >
            <img :src="data.imageUrl">
            <div class="txt">
              <h4>{{ data.brandName }}</h4>
              <span class="productName">{{ data.productName }}</span>
              <div>
                <span>￥{{ data.price }}</span>
                <del>￥{{ data.marketPrice }}</del>
                <u>{{ data.discount }}折</u>
              </div>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="lists">
      <!-- <span
       class="iconfont icon-gouwu list-frist"></span> -->
       <van-icon name="bag-o" class="list-frist" :badge="plist.length" />
      <span class="iconfont icon-huidaodingbuxianxing list-last"></span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import ProductListNav from '@/views/ProductListNav.vue'
import {mapActions,mapState} from 'vuex'

export default {
  components: {
      ProductListNav
  },
  data(){
    return {
      isShow:true
    }
  },

  computed:{
    ...mapState("product",["dataList"]),
    ...mapState("cart",["plist"])
  },
  methods:{
    ...mapActions("product",["getDataList"]),
  },
  mounted(){
    window.onscroll = ()=>{
      if(document.documentElement.scrollTop>400){
        this.isShow = false
      }else{
        this.isShow = true
      }
    }
  },
  beforeDestroy(){
    window.onscroll = null
  },
  created(){
    if(this.dataList.length>0){

    }else{
    this.getDataList(this.$route.query.id)

    }
  }
}
</script>

<style lang="scss" scoped>
  .plist{
    .section{
      padding-top: 0.8rem;
      p{
        display: flex;
        height: 0.2rem;
        align-items: center;
        padding-left: 0.2rem;
        i{
          font-size: 0.08rem;
          color: #E55858;
          border: solid 0.01rem #E55858;
        }
        span{
          font-size: 0.12rem;
          margin-left: 0.05rem;
        }
      }
      .productlists{
        padding: 0 0.1rem;
        overflow-x: hidden;
        ul{
          column-count: 2;
          column-width: 1.65rem;
          column-gap: 0.05rem;
          li{
            break-inside: avoid;
            width: 1.65rem;
            img{
              width: 1.65rem;
              height: 2.2rem;
            }
            .txt{
              .productName{
                display: block;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              div{
                span{
                  color: #DD2828;
                }
                del{
                  color: #D3D3D3;
                  margin-left: 0.1rem;
                }
                u{
                  text-decoration: none;
                  margin-left: 0.2rem;
                }
              }
            }
          }
        }
      }
    }
    .lists{
      position: fixed;
      bottom: 0.5rem;
      right: 0.2rem;
      display: flex;
      flex-direction: column;
      span,i{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.3rem;
        height: 0.3rem;
        font-size: 0.26rem;
      }
    }
  }
</style>
